<template>
	<div class="playList">
		<div class="title">
			<h2>电台推荐</h2>
			<p @click="change">换一换</p>
		</div>
		<div class="Playlist">
			<div @click="radiodetail(item.id)" class="musicList" v-for="(item,index) in hotDjs" :key="item.id">
				<div class="imgbox">
					<img :src="item.picUrl" alt="" />
				</div>
				<p>{{item.copywriter}}</p>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: "playlist",
		
		data() {
			return {
				hotDj:[],
				hotDjs:[]
			}
		},
		methods: {
			change() {
				let lang = Math.floor(Math.random() * (this.hotDj.length - 3));
				this.hotDjs = this.hotDj.slice(lang, lang + 3)
			},
			radiodetail(id){
				this.$router.push({
					name:"show",
					query:{
						ids:id
					}
				})
			}
		},
		created() {
			this.$http.get("/dj/hot").then(res => {
				console.log(res.data.djRadios)
				this.hotDj = res.data.djRadios;
				this.hotDjs = res.data.djRadios.slice(0,3)
			})
		}

	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.playList {
		background: #fff;
		padding: 0 vw(16);
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: vw(16) 0;
			h2 {
				font-size: vw(16);
			}
			p {
				font-size: vw(10);
				border: 1px solid #ddd;
				border-radius: vw(10);
				padding: vw(4) vw(6);
			}
		}
		
		.Playlist {
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 vw(14);
			.musicList {
				width: 32%;
				margin-right: vw(4);
				.imgbox {
					width: 100%;
					height: vw(110);
					overflow: hidden;
					border-radius: vw(5);
					img {
						width: 100%;
					}
				}
				p {
					margin: vw(6) 0;
					color: #666;
					font-size: vw(12);
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			&::after {
				content: "";
				flex: auto;
			}
		}
	}
</style>